<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Select v-model="value1" clearable style="width:200px">
                        <Option v-for="item in optionList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </Col>
                <Col span="5">
                    <Input v-model="value2" placeholder="姓名" clearable style="width: 200px"/>
                </Col>
                <Col span="5">
                    <Input v-model="value3" placeholder="联系电话" clearable style="width: 200px"/>
                </Col>
                <Col span="5">
                    <Input v-model="value4" placeholder="证件号" clearable style="width: 200px"/>
                </Col>
                <Col span="1">
                    <Button type="primary" class="lyx-mr10">查询</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns" :data="dataList"
                           @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="8" show-total :current="currentPageNo" :page-size="currentPageSize"
                          @on-change="changePage"/>
                </Col>
            </Row>
        </div>
        <Modal :footer-hide="footerHide" v-model="modalInfo" width="800" :title="modalTitle" @on-ok="modalOk"
               @on-visible-change="modalChange">
            <!--详情内容-->
            <template class="info" v-if="infoShow === true">
                <Tabs value="man">
                    <TabPane label="男方" name="man">
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">姓名:</span>
                                <span>John Brown</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">身份证类别:</span>
                                <span>外国人居住证</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">证件类型:</span>
                                <span>身份证</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">证件号码:</span>
                                <span>210304199011112413</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">出生日期:</span>
                                <span>1990-11-11</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">国籍:</span>
                                <span>美国</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">民族:</span>
                                <span>欧裔美国人</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">职业:</span>
                                <span>IT互联网</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">文化程度:</span>
                                <span>博士</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">户口所在地:</span>
                                <span>沈阳</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">预审材料:</span>
                                <span>无</span>
                            </Col>
                        </Row>
                    </TabPane>
                    <TabPane label="女方" name="woman">
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">姓名:</span>
                                <span>王美玲</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">身份证类别:</span>
                                <span>居民身份证</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">证件类型:</span>
                                <span>身份证</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">证件号码:</span>
                                <span>210204199303082413</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">出生日期:</span>
                                <span>1993-03-08</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">国籍:</span>
                                <span>中国</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">民族:</span>
                                <span>汉族</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">职业:</span>
                                <span>销售</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">文化程度:</span>
                                <span>本科</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">户口所在地:</span>
                                <span>沈阳</span>
                            </Col>
                        </Row>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">预审材料:</span>
                                <span>无</span>
                            </Col>
                        </Row>
                    </TabPane>
                </Tabs>
            </template>
            <!--驳回内容-->
            <template class="info" v-if="rejectShow === true">
                <Form label-position="right" :label-width="100">
                    <Row>
                        <Col span="5" class="ivu-form-item-label">原因：</Col>
                        <Col span="16" class="ivu-form-item-content">
                            <Input v-model="rejectInfo" type="textarea" :autosize="{minRows: 3,maxRows: 7}"></Input>
                        </Col>
                    </Row>
                </Form>
            </template>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modalInfo: false, // 模态框
      modalTitle: '', // 模态框标题
      footerHide: false, // 模态框页脚
      infoShow: false, // 详情模态框状态
      rejectShow: false, // 驳回模态框状态
      totalnum: 0, // 页总数
      currentPageNo: 1, // 当前页数
      currentPageSize: 8, // 当前页条数
      rejectInfo: '', // 驳回原因
      currentItem: [], // 当前条
      value1: '', // 业务类别
      optionList: [
        {
          value: 'option1',
          label: '中国公民与外国人在中国境内结婚'
        },
        {
          value: 'option2',
          label: '双方都是外国人在中国境内结婚'
        },
        {
          value: 'option3',
          label: '中国公民和外国人在中国境外结婚'
        },
        {
          value: 'option4',
          label: '中国公民和中国公民在中国境外结婚'
        }
      ],
      value2: '', // 姓名
      value3: '', // 联系电话
      value4: '', // 证件号
      columns: [
        {
          title: '业务类别',
          key: 'type',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center'
        },
        {
          title: '预约时间',
          key: 'time',
          align: 'center'
        },
        {
          title: '特别说明',
          key: 'notice',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state',
          align: 'center',
          render: (h, params) => {
            let type = this.autoType(params.row.state)
            return h('span', type)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let temp = []
            if (params.row.state === '0') {
              temp.push(
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.info(params.row)
                    }
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.accept(params.row)
                    }
                  }
                }, '受理'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.reject(params.row)
                    }
                  }
                }, '驳回')
              )
            } else if (params.row.state === '1' || params.row.state === '2') {
              temp.push(
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.info(params.row)
                    }
                  }
                }, '详情'))
            }
            return h('div', temp)
          }
        }
      ],
      dataList: [],
      dataList1: [
        {
          type: '中国公民与外国人在中国境内结婚',
          name: 'John Brown',
          tel: 13904206766,
          time: '2019-07-08 13:30:28',
          notice: '单方缺少证明',
          state: '0'
        },
        {
          type: '双方都是外国人在中国境内结婚',
          name: 'Jim Green',
          tel: 13904886766,
          time: '2019-07-08 14:20:28',
          notice: '单方缺少证明',
          state: '0'
        },
        {
          type: '中国公民和外国人在中国境外结婚',
          name: 'Joe Black',
          tel: 13903406766,
          time: '2019-07-08 13:12:28',
          notice: '无',
          state: '0'
        },
        {
          type: '中国公民和中国公民在中国境外结婚',
          name: '汤婉婷',
          tel: 13904244766,
          time: '2019-07-08 13:40:28',
          notice: '无',
          state: '0'
        },
        {
          type: '中国公民与外国人在中国境内结婚',
          name: 'John Peter',
          tel: 13904202966,
          time: '2019-07-08 13:30:28',
          notice: '无',
          state: '0'
        },
        {
          type: '中国公民和中国公民在中国境外结婚',
          name: '白静',
          tel: 13904216766,
          time: '2019-07-08 13:30:28',
          notice: '无',
          state: '2'
        },
        {
          type: '中国公民与外国人在中国境内结婚',
          name: 'Joe Lilly',
          tel: 13904223766,
          time: '2019-07-08 15:30:11',
          notice: '无',
          state: '0'
        },
        // {
        //   type: '类型4',
        //   name: 'Jon Sunny',
        //   tel: 13901206766,
        //   time: '2019-07-08 13:30:28',
        //   notice: '',
        //   state: '0'
        // },
        // {
        //   type: '类型5',
        //   name: 'Jock Brown',
        //   tel: 18804223766,
        //   time: '2019-07-07 15:30:40',
        //   notice: '无',
        //   state: '0'
        // },
        {
          type: '中国公民和中国公民在中国境外结婚',
          name: '刘明',
          tel: 17601886266,
          time: '2019-07-07 12:12:43',
          notice: '无',
          state: '1'
        }
      ]
    }
  },
  methods: {
    init () {
      this.dataList = this.dataList1
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    changePage (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    info (item) {
      this.modalTitle = '详细情况'
      this.footerHide = true
      this.modalInfo = true
      this.infoShow = true
    },
    accept (item) {
      this.$Modal.confirm({
        title: '确认受理么？',
        onOk: () => {
          item.state = '1'
        },
        onCancel: () => {
        }
      })
    },
    reject (item) {
      this.modalTitle = '驳回原因'
      this.footerHide = false
      this.modalInfo = true
      this.rejectShow = true
      this.currentItem = item
    },
    modalOk () {
      if (this.rejectShow === true) {
        this.currentItem.state = '2'
      }
    },
    modalChange () {
      if (this.modalInfo === false) {
        this.modalTitle = ''
        this.footerHide = false
        this.infoShow = false
        this.rejectShow = false
      }
    },
    // 表格状态显示
    autoType (value) {
      if (value === '0') {
        return '待受理'
      } else if (value === '1') {
        return '已受理'
      } else if (value === '2') {
        return '已驳回'
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .page-header {
        margin-bottom: 20px;
    }

    .lyx-mr10 {
        margin-right: 10px;
    }

    .lyx-mb10 {
        margin-bottom: 10px;
    }

    .p10 {
        padding: 10px;
    }

    .info {
        font-size: 14px;
    }

    .bold {
        font-weight: bold;
        margin-right: 4px;
    }
</style>
